<!-- 新增/编辑指标 -->
<template>
  <a-drawer
    width="45%"
    :visible="props.visible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    unmountOnClose
  >
    <template #title> {{ props.data?.id ? '编辑指标' : '新增指标' }} </template>
    <div>
      <a-form :model="formData" ref="refForm" :rules="rules" auto-label-width>
        <a-form-item label="指标来源" field="source" show-colon>
          <a-select v-model="formData.source">
            <a-option
              v-for="item in arr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="指标类型" field="type" show-colon>
          <a-select v-model="formData.type">
            <a-option :value="1">定性指标</a-option>
            <a-option :value="2">定量指标</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="指标名称" field="name" show-colon>
          <a-input v-model="formData.name"></a-input>
        </a-form-item>
        <a-form-item label="指标定义" field="indexDefinition" show-colon>
          <a-textarea
            v-model="formData.indexDefinition"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="项目界定" field="projectDefinition" show-colon>
          <a-textarea
            v-model="formData.projectDefinition"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="指标极性" field="polarity" show-colon>
          <a-select v-model="formData.polarity">
            <a-option
              v-for="polarity in polarityList"
              :key="polarity.value"
              :value="polarity.value"
            >
              {{ polarity.lable }}
            </a-option>
          </a-select>
        </a-form-item>

        <a-form-item label="指标公式/说明" field="instructions" show-colon>
          <a-textarea
            v-model="formData.instructions"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="评价标准/规则" field="rule" show-colon>
          <a-textarea
            v-model="formData.rule"
            show-word-limit
            :max-length="50"
            :auto-size="{
              minRows: 4
            }"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="指标权重" field="indexWeight" show-colon>
          <a-input-number v-model="formData.indexWeight" hide-button>
            <template #suffix>%</template></a-input-number
          >
        </a-form-item>
        <a-form-item label="考核目标" field="target" show-colon>
          <a-table style="width: 100%" :data="tempData" :pagination="false">
            <template #columns>
              <a-table-column title="基准值" data-index="">
                <template #title>
                  基准值
                  <a-switch
                    v-model="formData.isUseReferenceValue"
                    :checked-value="1"
                    :unchecked-value="2"
                  />
                </template>
                <template #cell>
                  <a-form-item
                    :field="`referenceValue`"
                    hide-label
                    :rules="[
                      {
                        required:
                          formData.isUseReferenceValue === 1 ? true : false,
                        message: '请输入'
                      }
                    ]"
                  >
                    <a-input-number
                      v-model="formData.referenceValue"
                      :disabled="formData.isUseReferenceValue !== 1"
                      hide-button
                    ></a-input-number>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="目标值" data-index="">
                <template #cell>
                  <a-form-item
                    :field="`targetValue`"
                    hide-label
                    required
                    :rules="[
                      {
                        required: true,
                        message: '请输入'
                      }
                    ]"
                  >
                    <a-input-number
                      v-model="formData.targetValue"
                      hide-button
                    ></a-input-number>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="挑战值" data-index="">
                <template #title>
                  挑战值
                  <a-switch
                    v-model="formData.isUserChallengePoint"
                    :checked-value="1"
                    :unchecked-value="2"
                  />
                </template>
                <template #cell>
                  <a-form-item
                    :field="`challengePoint`"
                    hide-label
                    :hide-asterisk="false"
                    :rules="[
                      {
                        required:
                          formData.isUserChallengePoint === 1 ? true : false,
                        message: '请输入'
                      }
                    ]"
                  >
                    <a-input-number
                      v-model="formData.challengePoint"
                      :disabled="formData.isUserChallengePoint !== 1"
                      hide-button
                    ></a-input-number>
                  </a-form-item>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </a-form-item>
        <a-form-item label="考核目标单位" field="targetUnitValue" show-colon>
          <a-input
            v-model="formData.targetUnitValue"
            placeholder="请输入单位，比如%、元、万元"
          />
        </a-form-item>
        <a-form-item label="评分方式" field="scoringMethod" show-colon>
          <a-radio-group v-model="formData.scoringMethod">
            <a-radio :value="1">直接输入</a-radio>
            <a-radio :value="2">公式计算</a-radio>
          </a-radio-group>
        </a-form-item>
        <!-- <a-form-item
          label="计算公式"
          field=""
          show-colon
          v-if="formData.way === 2"
        >
          <a-button type="text" @click="countSettingVisiable = true"
            >设置</a-button
          >
        </a-form-item> -->
        <a-form-item label="状态" field="" show-colon>
          <a-space>
            <a-switch
              v-model="formData.status"
              :checked-value="1"
              :unchecked-value="2"
            ></a-switch>
          </a-space>
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确认</a-button>
        <a-button v-if="!formData?.id" type="primary" @click="continueAdd"
          >确认并继续新增</a-button
        >
      </a-space>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import { PerformanceKeyPerformanceIndexLibraryUse } from '@/apis/management/performance/baseSetting/template/type';
import { useVModel } from '@vueuse/core';
import { GetPpiIndexRepeat } from '@/apis/management/performance/baseSetting/template/index';
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    data?: PerformanceKeyPerformanceIndexLibraryUse; // 传进来的数据,
  }>(),
  {}
);
const tempData = [{}];
const arr = [
  {
    value: 1,
    label: '财务类'
  },
  {
    value: 2,
    label: '客户类'
  },
  {
    value: 3,
    label: '内部运营类'
  },
  {
    value: 4,
    label: '学习与成长类'
  }
];
const polarityList = [
  { value: 1, lable: '越大越好' },
  { value: 2, lable: '越小越好' }
];
const emits = defineEmits(['update:visible', 'submit', 'exist']);
const formData = useVModel(props, 'data', emits);
let refForm = ref();

/**
 * 查重
 */
const validateName = async (value: any, cb: any) => {
  //排除本来的名称
  if (value === formData.value?.oldName) return;
  // 排查即将新增的数据
  emits('exist', formData.value, (isExist: boolean) => {
    if (isExist) {
      cb('名称已存在!');
      return;
    }
  });
  // 排查数据库的数据
  // const res = await GetPpiIndexRepeat({
  //   name: value
  // });
  // if (res?.code === 400) {
  //   cb('名称已存在!');
  // }
};
const rules = reactive({
  type: [
    {
      required: true,
      message: '请选择'
    }
  ],
  name: [
    {
      required: true,
      message: '请输入'
    },
    {
      validator: validateName
    }
  ],
  weight: [
    {
      required: true,
      message: '请输入'
    }
  ]
});

const handleOk = async () => {
  if (await refForm.value.validate()) {
    return;
  }
  emits('submit', formData.value);
  emits('update:visible', false);
};

const handleCancel = () => {
  emits('update:visible', false);
};
const continueAdd = async () => {
  if (await refForm.value.validate()) {
    return;
  }
  emits('submit', formData.value);
};
</script>

<style scoped lang="less">
.icon {
  cursor: pointer;
  font-size: 20px;
}
</style>
